<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<!-- 	导入Struts 2标签库 -->
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
    <button data-method="notice" class="layui-btn layui-layout-right">请登录</button>
</div>
<%--<form action="login.action" method="post">
    <input type="text" name = "username">
    <input type="password" name = "password">
    <input type="submit" value="登录">
</form>--%>

<script src="layui/layui.all.js"></script>
<script>
    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        //触发事件
        var active = {
            notice: function(){
                //示范一个公告层
                layer.open({
                    type: 2
                    ,title: false //不显示标题栏
                    ,closeBtn: false
                    ,area: ['500px', '320px']
                    ,shade: 0.8
                    ,id: 'login' //设定一个id，防止重复弹出
                    ,btn: ['登录', '取消']
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: 'loginForm.html'
                    ,yes: function(index, layero){
                        layero.find('iframe').contents().find("#login").click();
                    }
                    ,btn2: function(){
                        layer.closeAll();
                    }
                });
            }
        }

        $('#layerDemo .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });

</script>
</body>
</html>
